<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>曾威林的个人简历</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no, email=no">
  <link rel="stylesheet" href="./assets/style.css">
  <script src="./config.js"></script>
  <script src="./assets/url.js"></script>
  <script src="./assets/qrcode.js"></script>
  <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
  <h1>Weex Preview</h1>
  <div id="app"></div>
  <template id="app-template">
    <div id="app">
      <div class="mock-phone">
        <div class="inner">
          <iframe id="preview" src="./index.html"></iframe>
        </div>
        <div class="camera"></div>
        <div class="earpiece"></div>
        <div class="home-btn"></div>
      </div>
      <div id="qrcode">
        <h3>Web</h3>
        <a :href="webUrl" target="_blank"><canvas ref="canvas1" width="200" height="200"></canvas></a>
        <p class="bundle-url"><a :href="webUrl" target="_blank">{{webUrl}}</a></p>

        <h3>iOS & Android</h3>
        <a :href="nativieUrl" target="_blank"><canvas ref="canvas2" width="200" height="200"></canvas></a>
        <p class="bundle-url"><a :href="nativieUrl" target="_blank">{{nativieUrl}}</a></p>
      </div>

    </div>
  </template>
  <script>
    console.log('QR CODE native URL: ' + nativieUrl)
    console.log('QR CODE web URL: ' + webUrl)

    new Vue({
      el: '#app',
      template: '#app-template',
      data: { nativieUrl: nativieUrl, webUrl:webUrl },
      mounted: function () {
        var qrcodedraw = new QRCodeLib.QRCodeDraw()
        qrcodedraw.draw(this.$refs.canvas1, this.webUrl, function () {})
        qrcodedraw.draw(this.$refs.canvas2, this.nativieUrl, function () {})

      }
    })
  </script>
</body>
</html>
